<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left">
        <!-- <img slot="left" src="../assets/index/sao.png"> -->
      </div>
      <span>鸿包惠</span>
      <div class="right" @click="fenlei()">
        <img slot="right" src="../assets/index/caidan.png">
      </div>
    </div>
    <div class="n"></div>
    <!-- 轮播图 -->
     <div class="box bx">
      <yd-slider autoplay="5000">
        <yd-slider-item v-for="(item,index) in shufflingList" :key="index">
            <img :src="item.image">
        </yd-slider-item> 
      </yd-slider>
    </div> 
    <div class="hfu">
     <div class="hudu"></div>
    </div> 
    <!-- 菜单 -->
    <div class="menu">
      <div class="box">
        <div class="bar" @click="records()">
          <img src="../assets/index/zaishibeian.png">
          <span>债事备案</span>
        </div>
        <div class="bar" @click="solution()">
          <img src="../assets/index/jiezaishichaxun.png">
          <span>解债师查询</span>
        </div>
        <div class="bar" @click="shoppcart()">
          <img src="../assets/index/gouwuche.png">
          <span>资讯</span>
        </div>
        <div class="bar" @click="isVip()">
          <img src="../assets/index/huiyuanzhongxin.png">
          <span>码尚充值</span>
        </div>
      </div>
      <div class="box">
        <div class="bar" @click="hangtag()">
          <img src="../assets/index/guapaihongbao.png">
          <span>挂牌鸿包</span>
        </div>
        <div class="bar" @click="branch()">
          <img src="../assets/index/fenhangzhihang.png">
          <span>分行 / 支行</span>
        </div>
        <div class="bar" @click="train()">
          <img src="../assets/index/shangxueyuan.png">
          <span>商学院</span>
        </div>
        <div class="bar" @click="product()">
          <img src="../assets/index/quanbushangpin.png">
          <span>全部商品</span>
        </div>
      </div>
    </div>
    <!-- 热门 -->
    <div class="hot"> 
      <yd-rollnotice autoplay="3000" align="center">
        <yd-rollnotice-item v-for="(item,index) in marqueeList" :key="index">{{item.name}}</yd-rollnotice-item>  
     </yd-rollnotice>
    </div>
    <!-- 热门专区 -->
    <!-- <div class="division" @click="product()">
       <img src="../assets/index/11.png">
    </div>   
     <div class="division" > 
      <router-link to="/product1?id=10086">
       <img src="../assets/index/22.png"> 
      </router-link> 
    </div>     -->
    <div class="hotBox">
        <div> 
        <router-link to="/product1?id=9527&wz=直营商城">
        <img src="../assets/index/zysc.png">
        </router-link>  
        </div>
      <div>
        <router-link to="/product1?id=10010&wz=鸿包专区">
        <img src="../assets/index/hbzq.png"> 
        </router-link>  
      </div>
      <div @click="fli()">
        <!-- <router-link to="/product1?id=10086"> -->
        <img src="../assets/index/flsc.png">
        <!-- </router-link>   -->
      </div>
    </div>


    <!-- 惠好货 -->
    <div class="good_stuff">
      <span>{{list1list0.label_name}}</span> 
      <router-link :to='"/product?id="+list1list0.id+"&wz="+list1list0.label_name'> 
        <img :src="list1list0.image">
      </router-link>
    </div>   
    <div class="buying_spree se"> 
      <div  v-for="(item,index) in list1list0.goods" :key="index">
         <span>{{item.goods_category_name}}</span>
         <p  class="ps">
           <img v-for="(it,idex) in item.img" v-if="it.thumb" :key="idex" :src="it.thumb"  @click="quanbu(list1list[0].id,item.goods_category_id,list1list0.label_name)">
         </p> 
      </div> 
    </div>   


    <!-- 惠资源 -->
    <div class="good_stuff">
      <span>{{list1list1.label_name}}</span> 
      <router-link :to='"/product?id="+list1list1.id+"&wz="+list1list1.label_name'> 
        <img :src="list1list1.image">
      </router-link>
    </div>  
     <div class="buying_spree se"> 
      <div  v-for="(item,index) in list1list1.goods" :key="index">
         <span>{{item.goods_category_name}}</span>
         <p  class="ps">
           <img v-for="(it,idex) in item.img" v-if="it.thumb" :key="idex" :src="it.thumb"  @click="quanbu(list1list1.id,item.goods_category_id,list1list1.label_name)">
         </p> 
      </div> 
    </div>  


    <!-- 特色商品 -->
     <div class="good_stuff">
      <span>{{list1list2.label_name}}</span> 
      <router-link :to='"/product?id="+list1list2.id+"&wz="+list1list2.label_name'> 
        <img :src="list1list2.image">
      </router-link>
    </div>   
     <div class="buying_spree se"> 
      <div  v-for="(item,index) in list1list2.goods" :key="index">
         <span>{{item.goods_category_name}}</span>
         <p  class="ps">
           <img v-for="(it,idex) in item.img" v-if="it.thumb" :key="idex" :src="it.thumb"  @click="quanbu(list1list2.id,item.goods_category_id,list1list2.label_name)">
         </p> 
      </div> 
    </div>  


   <!-- 特色商品 -->
      <div class="good_stuff">
      <span>{{list1list3.label_name}}</span> 
      <router-link :to='"/product?id="+list1list3.id+"&wz="+list1list3.label_name'> 
        <img :src="list1list3.image">
      </router-link>
    </div>   
     <div class="buying_spree se"> 
      <div  v-for="(item,index) in list1list3.goods" :key="index">
         <span>{{item.goods_category_name}}</span>
         <p  class="ps">
           <img v-for="(it,idex) in item.img" v-if="it.thumb" :key="idex" :src="it.thumb"  @click="quanbu(list1list3.id,item.goods_category_id,list1list3.label_name)">
         </p> 
      </div> 
    </div>  

    <!-- 为你推荐 -->
    <div class="recommend">
      <div class="center">
        <img src="../assets/index/left.png" alt="">
        <span>为你推荐</span>
        <img src="../assets/index/right.png" alt="">
      </div>
    </div>

       <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
             <div  slot="list">
      <div class="commodity">
        <router-link :to='"/particulars?id="+item.id'  class="commodity_box"  v-for="(item,index) in list2list" :key="index">
        <div>
          <div class="pic"> 
           <img slot="img" v-lazy="item.thumb"> 
          </div>
          <div class="info">
            <span class="title">
            <span class="proti1" v-if="item.is_admin == 2">直营</span>
            <span class="proti1" v-if="item.is_admin == 1">商城</span>
            <span class="proti1" v-if="item.is_admin == 0">热销</span>
            {{item.title}}</span>
            <div class="price">
              <!-- <span class="rate"><span v-if="item.shop_price != null">￥{{item.shop_price}}</span> <span v-if="item.shop_price == null">￥0</span></span> -->
              <span class="rate" v-if="item.is_shoppingmall_auth == 0">￥{{item.market_price}}+{{parseInt(item.redbag_num)}}鸿包 </span>  
              <span class="rate" v-if="item.is_shoppingmall_auth == 1">￥{{item.shop_price}}送 {{parseInt(item.welfareReds)}}鸿包</span>  
              <span class="rate" v-if="item.is_shoppingmall_auth == 2">{{parseInt(item.redbag_num)}} 鸿包</span>  
              <span class="rate" v-if="item.is_shoppingmall_auth == 3">￥{{item.shop_price}}</span>
            </div>
            <!-- <span class="cate">￥{{item.market_price}} <span v-if="item.market_price == null">0</span>+{{item.redbag_num}} 鸿包</span> -->
              <span class="sold">已售 {{item.sale_number}} 件</span>

          </div>
        </div> 
        </router-link>
    </div>  

  </div>

     <!-- 数据全部加载完毕显示 -->
        <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
        <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>

    </yd-infinitescroll>

    <div class="s"></div>
    <!-- 底部tab -->
    <div class="tabbarWarp">
      <yd-tabbar class="cy_tabbar" fixed active-color="#e63f3f" color="#999" >
        <yd-tabbar-item title="首页" link="/" active>
          <img slot="icon" src="../assets/index/home.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="分类" link="/classify">
          <img slot="icon" src="../assets/index/classify-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="附近" link="/nearby">
          <img slot="icon" src="../assets/index/nearby-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="购物车" link="/information">
          <img slot="icon" src="../assets/index/information-hui.png">
        </yd-tabbar-item>
        <yd-tabbar-item title="我的" link="/mine">
           <img slot="icon" src="../assets/index/mine-hui.png">
        </yd-tabbar-item>
      </yd-tabbar>
    </div>

    <transition name="el-fade-in">
       <div class="top2" @click="toTop()" v-show="toTopShow">Top</div>
    </transition>
  </div>
</template>

<script>
// 头部
import {
  NavBar,
  NavBarBackIcon,
  NavBarNextIcon
} from "vue-ydui/dist/lib.rem/navbar";
Vue.component(NavBar.name, NavBar);
Vue.component(NavBarBackIcon.name, NavBarBackIcon);
Vue.component(NavBarNextIcon.name, NavBarNextIcon);
// 底部导航
import Vue from "vue";
import { TabBar, TabBarItem } from "vue-ydui/dist/lib.rem/tabbar";
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
// 轮播图
import { Slider, SliderItem } from "vue-ydui/dist/lib.rem/slider";
Vue.component(Slider.name, Slider);
Vue.component(SliderItem.name, SliderItem);
//滚动公告
import {RollNotice, RollNoticeItem} from 'vue-ydui/dist/lib.rem/rollnotice';
Vue.component(RollNotice.name, RollNotice);
Vue.component(RollNoticeItem.name, RollNoticeItem);

import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
Vue.component(InfiniteScroll.name, InfiniteScroll);
export default {
  name: "index",
  data() {
    return {
      shufflingList:[],//轮播
      marqueeList:[],//广告
      list1list:[],//list1

      list1list0:[],//list1
      list1list1:[],//list1
      list1list2:[],//list1
      list1list3:[],//list1
      toTopShow:false,
      page:2,
      pagesize:20,
      leve:0,
      user_from:0,
      list2list:[],//list2 为你推荐
    };
  },
  methods: {
    isVip(){
      // this.$router.push("/mine");
      if(this.leve > 0 || this.user_from >0 ){
        window.location.href='http://recharge.mashangc.com/neutral.php?user=MTc0ODYz'  
      }else{
        this.$dialog.toast({ mes: '请申请VIP会员' });
      }
    },
    product: function() {
      this.$router.push("/productAll");
    },
    train: function() {
      this.$router.push("/train");
    },
    branch: function() {
      this.$router.push("/branch");
    },
    hangtag: function() {
      this.$router.push("/hangtag");
    },
    shoppcart: function() {
      this.$router.push("/shoppcart");
    },
    solution: function() {
      this.$router.push("/solution");
    },
    records: function() {
      this.$router.push("/records");
    },
    fenlei:function(){
      this.$router.push("/classify"); 
    },
    
    //轮播图
    shuffling:function(){ 
      let self = this;
      let url = "/api/slide";
			self.httpPost(url,[],function(res) {
				if (res.code == 200) {  
          self.shufflingList=res.data
        } 
      })
    },
    //广告
    marquee:function(){ 
      let self = this;
      let url = "/api/marquee";
			self.httpPost(url,[],function(res) {
				if (res.code == 200) {  
          self.marqueeList=res.data;
				}  
      })
    },
    //list1
    list1:function(){ 
      let self = this;
      let url = "/api/index/list1";
			self.httpPost(url,[],function(res) {
				if (res.code == 200) {   
          self.list1list=res.data
          self.list1list0=res.data[0]
          self.list1list1=res.data[1]
          self.list1list2=res.data[2]
          self.list1list3=res.data[3]
				} 
      })
    },
    //推荐商品列表
    list2:function(){ 
      let self = this;
      let url = "/api/index/list2";
			self.httpPost(url,{pagesize:20,p:1},function(res) {
				if (res.code == 200) {   
          self.list2list=res.data 
				} 
      })
    },
    //滚动加载
    loadList() {
      let self = this;
      let url ="/api/index/list2";
      self.httpPost(url,{pagesize:20,p:self.page,}, function(res) {
        if (res.code == 200) {          
          let _list = res.data;
          self.list2list = [...self.list2list, ..._list];
          console.log("self.list3list",self.list3list)
          if (_list.length < self.pagesize) {           
            self.$refs.infinitescrollDemo.$emit(
              "ydui.infinitescroll.loadedDone"
            );
            return;
          }
          self.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.finishLoad");     
          self.page++;        
        } else {
          self.$dialog.loading.close();
        }
      });
    }, 
      //显示隐藏
    handleScroll() {
      //首先修改相对滚动位置
      this.scrollTop = this.scrollTop = window.pageYOffset || document.body.scrollTop
      if (this.scrollTop > 300) {
        this.toTopShow = true
      }else {
        this.toTopShow = false
      }
    },
    //点击回到顶部
    toTop:function() {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
        //  document.documentElement.scrollTop-=50;
        // if (document.documentElement.scrollTop>0) {
        //     var c=setTimeout(()=>this.toTop(50),10);
        // }else {
        //     clearTimeout(c);
        // } 
    },
    //子类查全部
    quanbu:function(a,b,c){
      this.$router.push({path:'/product2',query:{kk:a,bb:b,cc:c}});
    }
    ,
     //获取用户资料
    detail: function() {
      let self = this;
      let url = "/api/login/detail";
      self.httpPost(url, { user_id: this.myid, token: this.token }, function(
        res
      ) {
        if (res.code === 200) {
          self.leve = res.data.level;
          self.user_from = res.data.user_from==null?0:res.data.user_from;
          console.log(self.user_from)
        } else if (res.code === 288) {
          self.$dialog.toast({ mes: res.msg });
            localStorage.clear()
           setTimeout(function() {
            // self.$router.push("/login");
            window.location.href="http://hbh.dev.whbpkj.com/wx/login"
          }, 1500);
        }
      });
    },
    //福利商城
    fli(){
      // if(this.leve == '0' || this.leve == 'null'){
      //   this.$dialog.toast({ mes: '请先升级VIP会员' });
      //   return
      // }
        this.$router.push("/product1?id=10086&wz=福利商城"); 
    },
  },
  mounted() {
     document.title = "首页"; 

    this.$nextTick(function () {
      //修改事件监听
      window.addEventListener('scroll', this.handleScroll)
    });
  },
  created(){ 
     document.title = "首页";  
     this.token = localStorage.getItem("mytoken");
     this.myid = localStorage.getItem("myid");
     this.detail();
     this.shuffling()
     this.marquee()
     this.list1()
     this.list2()
  } 
};
</script>


<style scoped>
.tabbarWarp {
  width: 100%;
  border-top: 1px solid #cccccc;
  position: fixed;
  bottom: 0;
  z-index: 9999999;
}
.n {
  height: 0.86rem;
}
.cy_tabbar {
  font-size: 0.3rem;
}
.yd-tabbar-icon img {
  width: 0.5rem;
}
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #e63f3f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 9999999;
}
.top_tab span {
  color: #fff;
  font-size: 0.3rem;
  margin-left: 0.45rem;
}
.top_tab img {
  width: 0.46rem;
}
.menu {
  width: 100%;
  height: 3.47rem;
  background: #fff;
  padding: 0.2rem 0.3rem 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-bottom: 1px solid #b9b9b9;
}
.menu .box {
  width: 100%;
  height: 42%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.menu .box .bar {
  display: flex;
  width: 22%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.menu .box .bar img {
  width: 0.81rem;
  height: 0.81rem;
}
.menu .box .bar span {
  color: #666;
  font-size: 0.26rem;
}
.hot {
  width: 100%;
  padding: 0.2rem 0.2rem;
  display: flex;
  justify-content: center;
  background: #fff;
  color: #666;
  font-size: 0.26rem;

}
.division {
  width: 100%; 
}
.division img {
  width:100%; 
}
.buying_spree {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
}
.buying_spree div {
  width: 50%;
  position: relative;
}
.buying_spree div:nth-child(1) {
  border-bottom: 1px solid #b9b9b9;
  border-right: 1px solid #b9b9b9;
}
.buying_spree div:nth-child(2) {
  border-bottom: 1px solid #b9b9b9;
}
.buying_spree div:nth-child(3) {
  border-right: 1px solid #b9b9b9;
}
.buying_spree div img {
  width: 100%;
  height: 100%;
}
.buying_spree span {
  position: absolute;
  z-index: 9999;
  top: 0.3rem;
  left: 0.3rem;
  font-size: 0.26rem;
}
.good_stuff {
  margin-top: 0.55rem;
  width: 100%;
  position: relative;
}
.good_stuff img {
  width: 100%;
  /* height: 2rem; */
}
.good_stuff span {
  width: 1.7rem;
  height: 0.55rem;
  background: #f45252;
  position: absolute;
  top: -0.3rem;
  color: #fff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  font-size: 0.28rem;
  line-height: 0.55rem;
  margin-right: 20rpx;
  text-align: center;
}
.good_stuff .sh {
  color: #000;
  font-size: 0.28rem;
  position: absolute;
  left: 0.3rem;
  top: 1.5rem;
  z-index: 999;
}
.recommend {
  margin-top: 0.3rem;
  width: 100%;
  height: 0.67rem;
  background: #fff;
  display: flex;
  justify-content: center;
}
.recommend .center {
  width: 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f77138;
  font-size: 0.28rem;
}
.recommend .center img {
  width: 0.45rem;
  height: 0.1rem;
}
.commodity {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.commodity .commodity_box {
  width: 49.3%;
  background: #fff;
  
}
.commodity_box:nth-child(2) ~ .commodity_box {
  margin-top: 0.1rem;
  background: #fff;
}
.commodity .commodity_box img {
  width: 100%;
  height: 3.5rem;
}
.commodity .commodity_box .info {
  width: 100%;
  padding: 0 0.2rem 0.2rem;
  background: #fff;
}
.commodity .commodity_box .info .title {
  font-size: 0.24rem;
  color: #666;
  display: inline-block;
  width: 100%;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commodity .commodity_box .info .price {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}
.commodity .commodity_box .info .price .rate {
  font-size: 0.26rem;
  color: #e63f3f;
  margin-top: .1rem;
}
.sold {
  font-size: 0.22rem;
  color: #999;
}
.commodity .commodity_box .info .cate {
  width: 100%;
  display: inline-block;
  border: 1px solid #f77138;
  color: #f77138;
  text-align: center;
  font-size: 0.2rem;
  padding: 0 0.02rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s {
  height: 1rem;
}
.buying_spree .ps{
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  padding:.2rem;
}
.buying_spree .ps img{
  width: 48%;
  height: 1rem;
}
.se>div:nth-child(1) span{
  color:#eb6258!important;
}
.se>div:nth-child(2) span{
  color:#4ca9eb!important;
}
.se>div:nth-child(3) span{
  color:#ea8e34!important;
}
.se>div:nth-child(4) span{
  color:#ebca47!important;
}
.buying_spree .ps img:nth-child(3){
  display: none;
}
.buying_spree .ps img:nth-child(4){
  display: none;
}
.buying_spree .ps img:nth-child(5){
  display: none;
}
.hfu{
  position: relative;
}
.hudu{
  height: .56rem;
  width: 100%;
  background: #ffffff;
  position: absolute;
  top: -.24rem;
  z-index: 999;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}
.hotBox{
  display: flex;
  padding:0 .3rem;
  margin-top: .3rem;
}
.hotBox>div{
  width: 30%;
}
.hotBox>div img{
  width: 100%;
  display: block;
}
.hotBox>div:nth-child(2){
  margin: 0 5%;
}
.proti1{
  text-align: center;
  color: #fff;
  background: #ff0000;
  display: inline-block;
  padding: 0px 2px;
  border-radius: 3px;
  font-size: .24rem;
}
.pic{
  background:rgba(126,188,250,.4);
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic img{
  display: block;
  margin: 0 auto;
}
img[lazy=loading] {
  height:30px!important;
  margin: auto;
  /* background: url("../assets/order_center/kongbai.png") no-repeat fixed center; */
}
</style>
<style>
.yd-slider-pagination-item-active {
  width: 6px !important;
} 

</style>

